<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 500px;
        height: 500px;
        background-color: #ccc;
        color: #fff;
        text-align: center;
        font-size: 100px;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
    <div class="box1"></div>
    <script>
      const box = document.querySelector('.box')

      let num = 0
      function addNum() {
        num++
        box.innerHTML = num
      }

      //利用定时器实现，当鼠标滑过，判断有没有定时器，还有就清除，以最后一次滑动为准开启定时器
      function debounce(fn, t = 500) {
        //准备一个定时器容器
        let timeId

        return function () {
          //判断是否有定时器存在
          //如果有，清除原来的定时器 (为了重新开始计算时间)
          if (timeId) clearTimeout(timeId)

          //重新赋值定时器
          timeId = setTimeout(() => {
            //时间一到执行函数
            fn()
          }, t)
        }
      }

      box.addEventListener('mousemove', debounce(addNum, 500))
    </script>
  </body>
</html>
